import React, { Component } from 'react';
import * as fetch from '../utils/fetch';
import CODE from '../utils/codeConfig';
import {
    View,
    Text,
    StyleSheet,
    TextInput,
    TouchableOpacity
} from 'react-native'
import Style from '../utils/style/style'
import WXStyle from '../utils/style/wxstyle'
export default class SendCode extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tagValue: '获取验证码',
            phone: '',
            disable: true,
            phoneDisdbled: false
        }
    }
    componentDidMount() {
        if (this.props.Phone) {
            this.setState({
                phone: this.props.phone,
                disable: false,
                phoneDisdbled: true
            })
        }
    }
    _sendCode() {
        if (this.state.disable) {
            return
        } else {
            if (!this.state.phone.match('^[1][34578][0-9]{9}$')) {
                //模态框
                return
            }
            this.setState({
                tagValue: '发送中...',
                disable: true,
                phoneDisdbled: true
            })
            this._getCode();
        }
    }
    _getCode() {
        //后端获取验证码
        const { phone } = this.state
        const { api } = this.props;
        fetch.request(`${api}`, 'GET',{phone:phone}).then(res => {
            console.log(res)
            console.log(res.code.statuCode == CODE.SUCCESS)
            if (res.code.statuCode == CODE.SUCCESS) {
                setTimeout(() => {
                    this._tagTimer();
                }, 500)

            } else if (res.code.statuCode == CODE.VERIFICATION_CODE_TIME_OUT) {
                modal.showError("获取验证码服务端网络超时")
            }
        }).catch(e => {

        })

    };

    //倒数计时器
    _tagTimer() {
        let time = 180;
        console.log(time)
        const mytimer = setInterval(() => {
            time--;
            if (time > 0) {
                this.setState({
                    tagValue: "获取(" + time + ")"
                })
            } else {
                this.setState({
                    phoneDisdbled: false,
                    disable: false,
                    tagValue: '获取验证码'
                })
                clearInterval(mytimer);
            }
        }, 1000)
    }

    _onchange(value) {
        if (isNaN(value)) {
            return
        } else {
            this.setState({
                phone: value,
                disable: false,
            });
            this.props.changePhone(value);
        }
    }
    render() {
        //手机号 api 发送验证码成功期间后手机号不可更改
        const { phoneStyle, codeStyle, container } = this.props;
        const { disable, phoneDisdbled } = this.state;
        return (
            <View style={container ? container : styles.container}>
                <TextInput underlineColorAndroid="transparent" keyboardType="numeric" onChangeText={(value) => { this._onchange(value) }} style={[phoneStyle ? phoneStyle : styles.phone]} editable={!phoneDisdbled} placeholder="请输入手机号"></TextInput>
                <TouchableOpacity style={[codeStyle ? codeStyle : styles.code]} onPress={() => this._sendCode()}>
                    <Text style={[Style.f17, this.state.disable ? Style.color999 : styles.codeAble]}>{this.state.tagValue}</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center'
    },
    phone: {
        flex: 1,
        fontSize: 17
    },
    code: {
        paddingLeft: 12,
        paddingRight: 12,
        width: 110,
        borderStyle: 'solid',
        borderColor: '#e5e5e5',
        borderLeftWidth: 1,
        alignItems: 'center',
    },
    codeAble: {
        color: WXStyle.mainColor
    }
})

